<template>
  <div id='tmpl'>
        <!-- 1.提交评论 -->
        <div id="postComment">
          <h3>请您点评一下</h3>
          <textarea placeholder="请输入您要评论的内容" v-model="postcontent"></textarea>
          <mt-button type="primary" size="large" @click="postcomment">发表</mt-button>
        </div>
        <!-- 2.获取评论信息 -->
        <div id="commentList">
          <h3>评论信息详情</h3>
          <p class="listP"></p>
          <div v-for="(item,index) in list">
                <div class="title">
                    <span>第{{index + 1}}楼:</span>
                    <span>用户：{{item.user_name}}</span>
                    <span>发表时间：{{item.add_time | datefmt('YYYY-MM-DD HH:mm:ss')}}</span>
                </div>
                <ul class="mui-table-view"> 
                    <li class="mui-table-view-cell" v-text="item.content"></li>
                </ul>
            </div>
        </div>
        <!-- 3.点击加载更多 -->
        <mt-button type="danger" size="large" plain @click="getmoer">加载更多</mt-button>
  </div>
</template>
<script>
import { Toast } from 'mint-ui';
export default {
  props:['id'],//接收父组件传过来的值
  data () {
    return {
        pageIndex:1,//当前显示的是第几页
        postcontent:'',//双向数据绑定用户输入的内容
        list:[] //评论详情数据的展示
    };
  },
  created(){
      this.getCommentList(this.pageIndex);
  },
  methods:{
    postcomment(){
          //先判断postcontent里有内容没
          if(this.postcontent.trim().length <=0){
              Toast('请先输入评论内容');
              return;
          }
          var url = this.$common.apidomain+'/api/postcomment/'+this.id;
            this.$http.post(url,{content:this.postcontent},{emulateJSON:true}).then(function(res){
              Toast(res.body.message);
              //把用户新输入的评论置顶到评论信息详情
              this.list = [{
                  "user_name": "匿名用户",
                  "add_time" : new Date(),
                  "content"  : this.postcontent
              }].concat(this.list);

              this.postcontent='';
          }) 
      },
    getCommentList(pageIndex){  //pageIndex:代表的是当前获取的是哪一页的数据，默认值是1
            pageIndex = pageIndex || 1;
          var url = this.$common.apidomain + '/api/getcomments/' + this.id + '?pageindex=' +pageIndex;
            this.$http.get(url).then(function(res){
          if(res.body.status !=0){
              Toast('你要的列表不在');
                return;
          }
              this.list = this.list.concat(res.body.message);
          });
    },
    getmoer(){

        this.pageIndex++;

        this.getCommentList(this.pageIndex);
    }

  }
}
</script>
<style lang="css" scoped>
      /* 提交评论样式 */
      #postComment h3{
        color: #0094f0;
        padding: 10px;
      }
      /* 评论信息详情 */
      #commentList h3{
        color: #0094f0;
        padding: 10px;
      }
      .listP{
        height: 1px;
        border-bottom: 1px solid rgba(0,0,0,0.2);
        width: 100%;
      }
      .title{
        padding: 10px;
        color: #6d6d72;
        font-size: 15px;
        background-color: rgba(0, 0, 0, 0.2);
      }
</style>